<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link class="include" type="text/css" rel="stylesheet"
	href="/bigjo/css/jquery.jqplot.css">
<script type="text/javascript" src="/bigjo/js/jquery.js"></script>
<script type="text/javascript" src="/bigjo/js/jquery.jqplot.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.barRenderer.js"></script>
<script type="text/javascript"
	src="/bigjo/js/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.pointLabels.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		var count = new Array();
		var gender = new Array();
		var genre = new Array();
		var test1 = new Array();
		var test2 = new Array();
		for ( var i = 0; i < 10; i++) {
			count[i] = $(".gwangjugender" + i).attr("count");
			genre[i] = $(".gwangjugender" + i).attr("genre");
			gender[i] = $(".gwangjugender" + i).attr("gender");

			if (count[i] == null && gender[i] == null) {
				if (count[i] == "" && gender[i] == "") {
					if (genre[i] == "" && genre[i] == null) {
						break;
					}
				}
			}
		}
		var j =0;
		var t =0;
		for ( var i = 0; i < 10; i++) {
			if (gender[i] == 1) {
				test1[j] = [count[i],genre[i]];
				j++;
			} else if (gender[i] == 2) {
				test2[t] = [count[i],genre[i]];
				t++;
			}
		}
		var test3 = [test1,test2];
		plot2 = $.jqplot('chart1', test3 , {
			seriesDefaults : {
				renderer : $.jqplot.BarRenderer,
				pointLabels : {
					show : true,
					location : 'e',
					edgeTolerance : -15
				},
				shadowAngle : 135,
				rendererOptions : {
					barDirection : 'horizontal'
				}
			},
			series : [ {
				label : '남자'
			}, {
				label : '여자'
			} ],
			legend : {
				show : true,
				placement : 'outsideGrid'
			},
			axes : {
				yaxis : {
					renderer : $.jqplot.CategoryAxisRenderer
				},
				xaxis : {
					min : 0,
					max : 150,
					tickOptions : {
						formatString : "%d"
					}
				}
			}
		});

	});
</script>
<body>
	<div id="chart1" class="chart1"></div>
	<%
		int i = 0;
	%>
	<c:forEach var="gwangju" items="${gwangjugender}">
		<input type="hidden" class="gwangjugender<%=i%>"
			count="${gwangju.areagglbean.aggl_count}"
			gender="${gwangju.areagglbean.aggl_gender}"
			genre="${gwangju.genrebean.g_genre}">
		<input type="hidden" value="<%=i++%>">
	</c:forEach>
</body>
</html>